<template>
  <footer class="footer">
    <span class="todo-count" v-show='titleList'><strong>{{titleList}}</strong>剩余</span>
    <ul class="filters" >
      <li>
        <a :class="{selected:type === 'all' }" href="#/" @click="changeType('all')">全部</a>
      </li>
      <li>
        <a :class="{selected:type === 'active' }" href="#/active" @click="changeType('active')">进行中</a>
      </li>
      <li>
        <a :class="{selected:type === 'completed' }" href="#/completed" @click="changeType('completed')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click='clearList' v-show='clearShow' >清除已完成</button>
  </footer>
</template>

<script>
export default {
  name: 'TodoFooter',
  props: {
    titleList: {
      type: Number,
      required: true,
    },
     clearShow:{
        type:Boolean,
        required:true
     },
     type:{
        type:String,
        required:true
     }
  },
  methods:{
    //清除已完成
     clearList(){
        this.$emit('clearList')
     },
     //改type
     changeType(type){
        this.$emit('changeType',type )
     }
  }
};
</script>

<style scoped lang="less"></style>
